
<template>
  <div>
    <a-tree-select
      v-model:value="value"
      show-search
      style="width: 50%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="Please select"
      allow-clear
      tree-default-expand-all
      :tree-data="treeData"
      tree-node-filter-prop="title"
    >
      <template #suffixIcon>
        图标
      </template>
    </a-tree-select>
    <a-tree-select
      v-model:searchValue="searchValue"
      v-model:value="value"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="Please select"
      multiple
      allow-clear
      tree-default-expand-all
      :tree-data="treeData"
      tree-node-filter-prop="label"
      :tree-line="true && { showLeafIcon }"
      :show-checked-strategy="SHOW_ALL"
      :height="2333"
    >
      <template #title="{ value: val, label }">
        <b
          v-if="val === 'parent 1-1'"
          style="color: #08c"
        >{{ val }}</b>
        <template v-else>{{ label }}</template>
      </template>
      <template #tagRender="{ label, closable, onClose, option }">
        <a-tag
          :closable="closable"
          :color="option.color"
          style="margin-right: 3px"
          @close="onClose"
        >
          {{ label }}&nbsp;&nbsp;
        </a-tag>

      </template>

    </a-tree-select>
  </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue';
export default {
  name: '',
  components: {},
  data() {
    return {
      SHOW_ALL: null,
      searchValue: '',
      treeData: [{
        label: 'parent 1',
        value: 'parent 1',
        color: 'pink',
        children: [{
          label: 'parent 1-0',
          value: 'parent 1-0',
          color: 'orange',
          children: [{
            label: 'my leaf',
            value: 'leaf1',
            color: 'green',
          }, {
            label: 'your leaf',
            value: 'leaf2',
            color: 'cyan',
          }],
        }, {
          label: 'parent 1-1',
          value: 'parent 1-1',
          color: 'blue',
        }],
      }],
      value: ['parent 1', 'parent 1-0', 'leaf1'],
      showLeafIcon: true,
    }
  },
  created() { },
  mounted() {
    this.SHOW_ALL = TreeSelect.SHOW_ALL
  },
  methods: {
    onClose() {

    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
